<template>
    <div class="maindiv" ref="refdiv">

        <!--头部模块-->
        <div class="Touristportrait">
            <div class="weather">
                <div class="fanhuimain" @click="gohome"><img src="../../../assets/largescreen/y19.png" alt=""></div>
                <div class="weatherimg"><img :src="qihouimg" alt=""></div>
                <div class="weathertext">{{ tianqi }} {{ wendu }}℃</div>
            </div>
            <div class="Navigation">
                <div class="Navigationleft">
                    <div class="Navigationimg " @click="go1">游客画像</div>
                    <div class="Navigationimg" style="margin-left: 20px" @click="go3">酒店民宿</div>
                </div>
                <div class="Navigationmiddle"> <img src="../../../assets/largescreen/y18.png" alt=""></div>
                <div class="Navigationright">
                    <div class="Navigationimgright selectdada" @click="go4">交通</div>
                    <div class="Navigationimgright" style="margin-left: 20px" @click="go2">景区</div>
                </div>
            </div>
            <div class="mydate">
                {{ nowDate }} {{ week }}
            </div>
        </div>
        <!--下方模块-->

        <div class="Touristbottomportrait">
            <!--左侧模块-->
            <div class="Leftsidemodule">
                <div class="modulediv modulediv_rs">
                    <div class="moduledivtop">
                        今日航班
                    </div>
                    <div class="Passengerflow" style="position: relative">
                        <table class="flowTableHeader">
                            <tbody style="width:100%;">
                                <tr class="yearsHeader">
                                    <th v-for="(item, index) in yearsNumHeader" :key="index" @click="showSelect(index)">{{
                                        item }}</th>
                                </tr>
                            </tbody>
                        </table>
                        <div class="tableData" style="width:100%;">
                            <vue-seamless-scroll :data="leftData" :class-option="defaultOption"
                                style="width:100%;padding: 0;">
                                <ul style="width:100%;padding: 0;">
                                    <li v-for="(item, index) in leftData" :key="index" class="flowTableData" style=";">
                                        <span>{{ item.lineNo }}次</span>
                                        <span>{{ item.sailTime }}</span>
                                        <span>{{ item.startPortName }}</span>
                                        <span>{{ item.endPortName }}</span>
                                        <span v-if="item.stateName == '未开航'"
                                            style=" color: #FE802C !important; line-height: 24px; text-align: center; display: block;width: 57px;height: 24px;background: url(https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png) no-repeat center;">未开航</span>
                                        <span v-if="item.stateName == '停航'"
                                            style=" color: #FF4141; line-height: 24px;text-align: center;display: block;width: 57px;height: 24px;background: url(https://i.ringzle.com/file/20231208/2685d12977b642feb5e4757bbc3caab4.png) no-repeat center;">停航</span>
                                        <span v-if="item.stateName == '已出发'"
                                            style=" color: #3DD485; line-height: 24px;text-align: center;display: block;width: 57px;height: 24px;background: url(https://i.ringzle.com/file/20231208/2354a7ba927b4c36b45f499342a1a83a.png) no-repeat center;">已出发</span>
                                        <span v-if="item.stateName == '大风待定'"
                                            style=" color: #FE802C !important; line-height: 24px; text-align: center; display: block;width: 57px;height: 24px;background: url(https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png) no-repeat center;">未开航</span>

                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                        <div class="select" v-if='selectFlag == true'>
                            <div class="triangle"></div>
                            <div v-for="(item, index) in startPort" :key="index" @click="changeStartPort(item, index)"
                                :class="['select_item', index == currentIndex ? 'selected_item' : '']">
                                {{ item.portName }}
                            </div>
                        </div>
                    </div>
                    <div class="yupiaotongji">
                        <div class="modulediv111">
                            <div class="moduledivtopight">
                                <div class="moduledivtopight1">船票预约统计</div>
                                <div class="moduledivtopight2">
                                    <el-radio-group v-model="Overviewparkselectjt" @input="Overvliewpartongjik" style="margin-right: 10px">
                                        <el-radio :label="7">近7天</el-radio>
                                        <el-radio :label="15">近15天</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                            <div class="mybar" ref="Visitorage">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--中间模块-->
            <div class="Intermediatemodule">
                <div class="modulediv modulediv_jzyx">
                    <div class="numsdiv">
                        <div class="numsdiv_pre">
                            <div class="np_title">今日入岛人数</div>
                            <div class="np_num">
                                <div class="npn_item" >{{ jinrinum1 }}</div>
                                <div class="npn_dw">人</div>
                            </div>
                        </div>
                        <!--<div class="numsdiv_pre numsdiv_pre_mszs">-->
                            <!--<div class="np_title">今日计划航班</div>-->
                            <!--<div class="np_num">-->
                                <!--<div class="npn_item" v-for="(num, idx) in todayShipLineCount" :key="idx">{{ num }}</div>-->
                                <!--<div class="npn_dw">次</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="numsdiv_pre" style="margin-left: 50px">
                            <div class="np_title">今日出岛人数</div>
                            <div class="np_num">
                                <div class="npn_item" >{{ jinrinum2 }}</div>
                                <div class="npn_dw">人</div>
                            </div>
                        </div>
                    </div>
                    <div class="md_map">
                        <div class="mapdiv">
                            <div class="mapdiv_town" :class="townIndex === index ? 'town_active' : ''" :style="town.style"
                                v-for="(town, index) in townList" :key="index" @click="changeTown(town.id, index)">{{
                                    town.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtopkll">
                        船票预订统计
                    </div>
                    <div class="mybar" ref="ticketBook"></div>
                </div>
            </div>
            <!--右侧模块-->
            <div class="Rightmodule">
                <div class="moduledivright">
                    <div class="moduledivtop">
                        出入岛统计
                    </div>
                    <div class="Passengerflowright">
                        <el-radio-group v-model="Overviewparkselect" @input="Overvliewpark" style="margin-right: 10px">
                            <el-radio :label="1">今日入岛人数</el-radio>
                            <el-radio :label="2">今日出岛人数</el-radio>
                            <el-radio :label="3">今日入岛车辆</el-radio>
                            <el-radio :label="4">今日出岛车辆</el-radio>
                        </el-radio-group>
                    </div>
                    <!--<div class="Accessislandstatistics">-->
                        <!--<dv-scroll-board ref="scrollchange" :config="Accessisland" style="width:100%;height:100%" />-->
                    <!--</div>-->
                    <div class="Passengerflowchurudao" style="position: relative">
                        <table class="flowTableHeader">
                            <tbody style="width:100%;">
                            <tr class="yearsHeader">
                                <th v-for="(item, index) in yearsNumHeaderchurudao" :key="index">{{
                                    item }}</th>
                            </tr>
                            </tbody>
                        </table>
                        <div class="tableData" style="width:100%;">
                            <vue-seamless-scroll :data="leftData" :class-option="defaultOption"
                                                 style="width:100%;padding: 0;">
                                <ul style="width:100%;padding: 0;">
                                    <li v-for="(item, index) in leftDatalist" :key="index" class="flowTableData" style=";">
                                        <span>{{ item.startPortName }}</span>
                                        <span>{{ item.endPortName }}</span>
                                        <span>{{ item.count }}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                        <div class="select" v-if='selectFlag == true'>
                            <div class="triangle"></div>
                            <div v-for="(item, index) in startPort" :key="index" @click="changeStartPort(item, index)"
                                 :class="['select_item', index == currentIndex ? 'selected_item' : '']">
                                {{ item.portName }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtop">
                        船型接待统计
                    </div>
                    <div class="chartBox">
                        <div class="cb_chart" ref="pieDate">
                        </div>
                    </div>
                </div>
                <!-- <img src="https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png" alt=""> -->

            </div>
        </div>
        <!--底部美化图-->
        <div class="Bottomlandscaping">

        </div>

    </div>
</template>

<script>
import * as echarts from "echarts";
import { detectZoom } from '@/utils/detectZoom';
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    components: {
        vueSeamlessScroll
    },
    name: '',
    data() {
        return {
            jinrinum1:0,
            jinrinum2:0,
            Overviewparkselect:1,
            Overviewparkselectjt:7,
            tianqi: '',
            wendu: '',
            qihouimg: '',
            windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
            yearsNumHeader: ['航班次', '开船时间', '出发港口 ▼', '到达港', '航班状态'],
            yearsNumHeaderchurudao:['起点','终点','数量'],
            selectFlag: false,
            todayShipOrderCount: [1, 2],
            todayShipLineCount: [2, 3],
            day7ShipCount: [4, 3, 2],
            nowDate: '',
            week: '',
            config: {
                evenRowBGC: 'opacity: 0.3',
                oddRowBGC: '#062156',
                headerBGC: "#0B0D2B",
                header: ['港口名称', '预约人数', '退票人数'],
                data: []
            },
            leftconfig: {
                // columnWidth:'80',
                evenRowBGC: 'opacity: 0.3',
                oddRowBGC: '#062156',
                headerBGC: "#0B0D2B",
                header: ['航班次', '开船时间', '出发港口<span style="font-size: 10px;margin-left:5px; ">▼</span>', '到达港', '航班状态'],
                data: [],
            },
            leftData: [],
            leftDatalist:[],
            today7: {
                xaxisData: ['12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11'],
                yaxisData: [5000, 10000, 20000, 15000, 24000, 24000, 24000,]
            },
            pie: [
                { value: 64, name: "摄像头", bl: '18%' },
                { value: 63, name: "灯", bl: '30%' },
            ],
            inIslandPersonCountList:[],
            inIslandCarCountList:[],
            outIslandCarCountList:[],
            outIslandPersonCountList:[],

            sumTicket: {
                myData3: [
                    "联庄村",
                    "唐家堡村",
                    "小山村",
                    "高泉村",
                    "寒树村",
                    "寒水村",
                    "中化村 ",
                    "金华村",
                    "好地掌村",
                    "庙川村",
                ],
                lastYear: [200, 340, 320, 220, 360, 300, 160, 400, 250, 280],
                nowYear: [160, 300, 280, 180, 300, 240, 120, 340, 200, 250]

            },
            startPort: ['沈家湾', '泗礁', '花鸟', '枸杞', '嵊山', '大洋', '五龙',],
            currentIndex: null,
            myislandId: [],
            townList: [
                { id: ['1014'], name: '花鸟乡', style: { 'left': '60.96%', 'top': '6.94%' } },
                { id: ['1028'], name: '洋山镇', style: { 'left': '11.57%', 'top': '47.62%' } },
                { id: ['1010'], name: '菜园镇', style: { 'left': '35.48%', 'top': '45.04%' } },
                { id: ['1019'], name: '五龙乡', style: { 'left': '56.40%', 'top': '44.05%' } },
                { id: ['1017'], name: '枸杞乡', style: { 'left': '74.53%', 'top': '48.81%' } },
                { id: ['1016'], name: '嵊山镇', style: { 'left': '88.65%', 'top': '45.63%' } },
                { id: ['1034'], name: '黄龙乡', style: { 'left': '60.51%', 'top': '70.83%' } }
            ],
            // townList: [
            //     { port: ['1028'], name: '沈家湾客运码头', style: { 'left': '21.96%', 'top': '36.94%' } },
            //     { port: ['1010'], name: '嵊泗李柱山客运站', style: { 'left': '23.48%', 'top': '23.04%' } },
            //     { port: ['5554544444'], name: '小菜园客运码头', style: { 'left': '39.4%', 'top': '29.05%' } },
            //     { port: ['1346784662'], name: '枸杞岛干斜码头', style: { 'left': '68.53%', 'top': '54.81%' } },
            //     { port: ['4545454544'], name: '嵊山泗洲塘客运码头', style: { 'left': '85.65%', 'top': '55.63%' } },
            //     { port: ['5645645645'], name: '燥山箱子吞码头', style: { 'left': '83.51%', 'top': '42.83%' } },
            //     { port: ['5645645645'], name: '花鸟岛南吞码头', style: { 'left': '69.51%', 'top': '7.83%' } },
            //     { port: ['5645645645'], name: '五龙边礁吞码头', style: { 'left': '60.51%', 'top': '49.83%' } },
            //     { port: ['5645645645'], name: '黄龙码头', style: { 'left': '54.51%', 'top': '66.83%' } },
            // ],
            townIndex: ''
        }
    },
    created() {
        this.getweather();
    },
    computed: {
        defaultOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    watch: {
        windowHeight(val) {
            let that = this;
            console.log("实时屏幕高度：", val, that.windowHeight);
        },
        windowWidth(val) {
            let that = this;
            console.log("实时屏幕宽度：", val, that.windowHeight);
        }
    },
    mounted() {
        const m = detectZoom();
        this.$refs.refdiv.style.zoom = 100 / Number(m);
        //启动定时器
        this.nowtime = setInterval(() => {
            this.getTime()
        }, 1000)
        this.setVisitoragedata();
        this.getPieDate()
        this.setPieDate()
        this.setTicketBook()
        this.getTodayTicketData()
        this.getVisitoragedata()
        this.getLeftTableData()
        this.getchurudao();
        this.getPortList()
        var that = this;
        // <!--把window.onresize事件挂在到mounted函数上-->
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                that.windowHeight = window.fullHeight;  // 高
                that.windowWidth = window.fullWidth; // 宽
            })()
        };
    },

    methods: {
        Overvliewpartongjik(){
//console.log(this.Overviewparkselectjt)
            this.getVisitoragedata()
        },
        Overvliewpark(){
            let that=this;
            that.leftDatalist=[];
            if(that.Overviewparkselect==1){
               that.leftDatalist=that.inIslandPersonCountList;

            }else  if(that.Overviewparkselect==2){
                that.leftDatalist=that.outIslandPersonCountList;

            }else  if(that.Overviewparkselect==3){
                that.leftDatalist=that.inIslandCarCountList;
            }else  if(that.Overviewparkselect==4){
                that.leftDatalist=that.outIslandCarCountList;
            }
        },
        //切换岛屿
        changeTown(id, index) {
            this.townIndex = index;
            if (!id) return
            this.myislandId = id;
            //图表初始化
            //  this.gettldata()
            // this.getalldata()
            console.log(id[0], 'item');
            this.currentIndex = index
            this.getLeftTableData(id[0])
            this.getchurudao(id[0]);
            this.getPieDate(id[0])
            this.getTodayTicketData(id[0])
            this.getVisitoragedata(id[0])
            this.selectFlag = false
        },
        gohome() {
            this.$router.replace({ path: '/home' })
        },
        getweather() {
            let that = this;
            //加载天气查询插件
            AMap.plugin('AMap.Weather', function () {
                //创建天气查询实例
                let weather = new AMap.Weather();
                //执行实时天气信息查询
                weather.getLive('嵊泗县', function (err, data) {
                    if (data.info == 'OK') {
                        //   console.log('111111111111111111',data.weather,data.temperature)
                        that.tianqi = data.weather;
                        that.wendu = data.temperature;

                        if (data.weather.indexOf("晴") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                        } else if (data.weather.indexOf("暴雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                        } else if (data.weather.indexOf("暴雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                        } else if (data.weather.indexOf("冰雹") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                        } else if (data.weather.indexOf("大雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                        } else if (data.weather.indexOf("大雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                        } else if (data.weather.indexOf("多云") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                        } else if (data.weather.indexOf("雷阵雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                        } else if (data.weather.indexOf("雾") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                        } else if (data.weather.indexOf("小到中雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                        } else if (data.weather.indexOf("小雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                        } else if (data.weather.indexOf("小雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                        } else if (data.weather.indexOf("阴") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                        } else if (data.weather.indexOf("雨夹雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                        } else if (data.weather.indexOf("阵雨@") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                        } else if (data.weather.indexOf("中到大雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                        } else if (data.weather.indexOf("中雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                        } else if (data.weather.indexOf("中雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                        } else if (data.weather.indexOf("霾") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                        }

                    }
                });
            });
        },
        showSelect(e) {
            if (e == 2) {
                this.selectFlag = !this.selectFlag
            }
            else return
        },
        getPortList() {
            this.$http.get('/travel/isshipport/listPort').then(res => {
                if (res.data.code == 0) {
                    this.startPort = res.data.data
                } else {
                    this.$message(res.data.msg)
                }
            })
        },
        changeStartPort(item, index) {
            this.currentIndex = index
            this.getLeftTableData(item.portNum)
            // this.getPieDate(item.portNum)
            // this.getTodayTicketData(item.portNum)

            this.selectFlag = false

        },
     //入岛人数 + 入岛车数 + 出岛人数 + 出岛车数 + 入岛总人数 + 出岛总人数
getchurudao(portNum) {
    this.$http.get('/sys/screen/ship/inOutIslandCount', { params: { portNo: portNum } }).then(res => {
        if (res.data.code == 0) {
            this.leftDatalist=res.data.data.inIslandPersonCountList;
            console.log('inIslandPersonCountList',res.data.data.inIslandPersonCountList)
            this.inIslandPersonCountList=res.data.data.inIslandPersonCountList;//入岛人数
            this.outIslandPersonCountList=res.data.data.outIslandPersonCountList;//出岛人数
            this.inIslandCarCountList=res.data.data.inIslandCarCountList;//入岛车数
            this.outIslandCarCountList=res.data.data.outIslandCarCountList;//出岛车数
this.jinrinum1=res.data.data.todayShipInAllCount;
            this.jinrinum2=res.data.data.todayShipOutAllCount;

          //  this.todayShipLineCount = res.data.data.todayShipLineCount
           // this.leftData = res.data.data.totalLineList
        } else {
            this.$message(res.data.msg);
        }
    })
},
        // 左侧数据
        getLeftTableData(portNum) {
            this.$http.get('/sys/screen/ship/todayShipLine', { params: { portNo: portNum } }).then(res => {
                if (res.data.code == 0) {
                    this.todayShipLineCount = res.data.data.todayShipLineCount
                    this.leftData = res.data.data.totalLineList
                } else {
                    this.$message(res.data.msg);
                }
            })
        },
        // 右2数据
        getVisitoragedata(item) {
            this.$http.get('/sys/screen/ship/today7ShipInfo', {
                params: {
                    portNo: item,
                    day:this.Overviewparkselectjt,
                } }).then(res => {
                if (res.data.code == 0) {
                    const array = []
                    this.day7ShipCount = res.data.data.day7ShipCount
                    this.today7.xaxisData = res.data.data.today7ShipInfoDate
                    res.data.data.today7ShipInfoCount.forEach(item => {
                        array.push(parseInt(item))
                    })
                    this.today7.yaxisData = array
                    this.$set(this.today7, this.today7)
                    this.setVisitoragedata()
                    console.log(res.data, 'res.datares.datares.datares.data');
                } else {
                    this.$message(res.data.msg);
                }
            })
        },
        // 右1数据
        getTodayTicketData(item) {
            this.$http.get('/sys/screen/ship/todayShipOrderCount/', {
                params: {
                    portNo: item
                }
            }).then(res => {
                if (res.data.code == 0) {
                    // this.config.data = []
                    this.todayShipOrderCount = res.data.data.todayShipOrderCount
                    if (res.data.data.todayShipOrderCountList) {
                        res.data.data.todayShipOrderCountList.forEach((item, index) => {
                            this.config.data.push([])
                            this.config.data[index][0] = item.endPortName
                            if (item.orderTrend == -1) {
                                this.config.data[index][1] = item.orderCountToday + '<span style="color: #00f107;    margin-left: 7px;">⬇</span>'
                            } if (item.orderTrend == 1) {
                                this.config.data[index][1] = item.orderCountToday + '<span style="color: red; margin-left: 7px;">⬆</span>'
                            }
                            if (item.orderTrend == 0) {
                                this.config.data[index][1] = item.orderCountToday + '<span style="color: #00f107;margin-left: 7px;">- -</span>'
                            }
                            if (item.orderQuitTrend == 1) {
                                this.config.data[index][2] = item.orderCountQuitToday + '<span style="color: red;  margin-left: 7px;">⬆</span>'
                            }
                            if (item.orderQuitTrend == -1) {
                                this.config.data[index][2] = item.orderCountQuitToday + '<span style="color: #00f107; margin-left: 7px;">⬇</span>'
                            }
                            if (item.orderQuitTrend == 0) {
                                this.config.data[index][2] = item.orderCountQuitToday + '<span style="color: #00f107; margin-left: 7px;">- -</span>'
                            }
                            console.log(this.config, 't222222his.config');

                            // this.config.data[index][1] = item.orderQuitTrend
                            // this.config.data[index][2] = item.orderCountQuitToday
                        })
                    } else {
                        this.$nextTick(() => {
                            // 在这里执行操作
                            this.$set(this.config, 'data', [])

                        });
                        console.log(this.config, 'this.config');

                    }

                    this.$set(this.config, this.config)
                } else {
                    this.$message(res.data.msg);
                }
            })
        },
        // 右3&&下方柱状图数据
        getPieDate(item) {
            console.log(item, 'ceshi ');
            this.$http.get('/sys/screen/ship/personCountAndTrend', { params: { portNo: item } }).then(res => {
                if (res.data.code == 0) {
                    const array = []
                    this.sumTicket.myData3 = res.data.data.shipTrendYearMonth
                    this.sumTicket.lastYear = res.data.data.shipTrendCountLastYear
                    this.sumTicket.nowYear = res.data.data.shipTrendCountNowYear
                    res.data.data.personShipReception.forEach((item, index) => {
                        array.push({ name: '', bl: null, value: '' })
                        array[index].name = item.name
                        array[index].bl = item.percentage
                        // this.pieData[index].name = item.name
                        array[index].value = parseFloat(item.percentage)
                    })
                    this.pie = array
                    console.log(this.pie, 'this.piethis.piethis.piethis.pie');
                    this.$set(this.sumTicket, this.sumTicket)
                    this.setTicketBook()
                    this.$set(this.pie, this.pie)
                    this.setPieDate()
                } else {
                    this.$message(res.data.msg)
                }
            })
        },
        // 右2柱状图
        setVisitoragedata() {
            let myChart = echarts.init(this.$refs.Visitorage);
            let xaxisData = this.today7.xaxisData
            let yaxisData = this.today7.yaxisData
            const offsetX = 10;
            const offsetY = 5;
            // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint;
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx
                        .moveTo(c0[0], c0[1])
                        .lineTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .closePath();
                },
            });

            // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath();
                },
            });

            // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath();
                },
            });

            // 注册三个面图形
            echarts.graphic.registerShape("CubeLeft", CubeLeft);
            echarts.graphic.registerShape("CubeRight", CubeRight);
            echarts.graphic.registerShape("CubeTop", CubeTop);

            let option = {
                //  backgroundColor: 'black',
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    //  backgroundColor: "rgba(255,255,255,0.75)",
                    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
                    textStyle: {
                        fontSize: 12,
                        color: "#fff",
                    },
                    formatter: (params, ticket, callback) => {
                        const item = params[1];
                        return item.name + " : " + item.value + "人";
                    },
                },
                grid: {
                    left: "1%",
                    right: "0%",
                    top: "16%",
                    bottom: "10%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xaxisData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: '#035192'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#C6D7F1'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "单位：人",
                    nameTextStyle: {
                        color: '#C6D7F1',
                        fontWeight: 400,
                        fontSize: 12
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 1,
                            color: '#545454'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#C6D7F1'
                    }
                },
                series: [
                    {
                        type: "custom",
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: "group",
                                children: [
                                    {
                                        type: "CubeLeft",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: '#00BFF4',
                                                },
                                                {
                                                    offset: 0.35,
                                                    color: '#0064B5'
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'transparent'
                                                }
                                            ]),
                                        },
                                    },
                                    {
                                        type: "CubeRight",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: '#0064B5',
                                                },
                                                {
                                                    offset: 0.35,
                                                    color: '#00BFF4'
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'transparent'
                                                }
                                            ]),
                                        },
                                    },
                                    {
                                        type: "CubeTop",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: '#00BFF4'
                                        },
                                    },
                                ],
                            };
                        },
                        data: yaxisData,
                    },
                    {
                        type: "bar",
                        itemStyle: {
                            color: "transparent",
                        },
                        data: yaxisData,
                    },
                ],
            };
            myChart.setOption(option);
        },
        // 右3饼状图
        setPieDate() {
            let myChart = echarts.init(this.$refs.pieDate);
            const pieData1 = this.pie
            let option = {
                color: ["#86DDFF", "#EA3D75", "#03FF96", "#B111FF", "#ff9f7f"],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                toolbox: {
                    show: true,
                },
                legend: {
                    x: "right", //可设定图例在左、右、居中
                    y: "center", //可设定图例在上、下、居中
                    align: "left", //字在图例的左边或右边【left/right】
                    orient: "vertical", //图例方向【horizontal/vertical】
                    icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
                    itemGap: 16,
                    formatter: function (name) {
                        let obj = {};
                        if (name) {
                            obj = pieData1.find(item => item.name === name)
                        }
                        return `{name|${name}}{bl|${obj.bl || '0%'}}`
                    },
                    textStyle: {

                        rich: {
                            name: {
                                color: "#fff",
                                fontSize: 14,
                                width: 100,
                                fontWeight: 600,
                            },
                            bl: {
                                color: '#C6D7F1',
                                fontSize: 16,
                                fontWeight: 600,
                                fontFamily: 'D-DINExp, D-DINExp',
                                // padding: [0, 0, 0, -15]
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "船型接待统计",
                        type: "pie",
                        radius: [20, 70],
                        center: ["25%", "50%"],
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                                // formatter: "{d}",
                                textStyle: {
                                    align: "center",
                                    baseline: "middle",
                                    fontSize: 16,
                                    fontWeight: "100",
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: pieData1,
                    },
                ],
            };
            myChart.setOption(option);

        },
        // 下方柱状图
        setTicketBook() {
            let myChart = echarts.init(this.$refs.ticketBook);
            let myData3 = this.sumTicket.myData3
            let nowYear = this.sumTicket.nowYear
            let lastYear = this.sumTicket.lastYear
            let option = {
                backgroundColor: "#071B3D",
                legend: {
                    icon: "rect",
                    itemWidth: 14,
                    itemHeight: 10,
                    itemGap: 20,
                    textStyle: {
                        fontSize: 14,
                        color: "#fff",
                    },
                    data: ["今年", "去年"],
                    selectedMode: false,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    textStyle: {
                        color: "#fff",
                    },
                    backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
                    formatter: "{b}：{c}",
                },
                grid: {
                    left: "3%",
                    right: "3%",
                    bottom: "1%",
                    top: "18%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: myData3,
                    axisPointer: {
                        type: "shadow",
                    },
                    axisLabel: {
                        color: "rgba(255, 255, 255, .8)",
                        interval: 0,
                        rotate: 30,
                        margin: 15,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(45, 67, 119, 0.8)",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    name: "人",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(45, 67, 119, 0.8)",
                        },
                    },
                    min: 0,
                    axisLabel: {
                        show: true,
                        color: "#fff",
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 0.5,
                            color: "rgba(45, 67, 119, .5)",
                            type: "dashed",
                        },
                    },
                },
                series: [
                    {
                        data: nowYear,
                        name: "今年",
                        type: "bar",
                        barWidth: "10px",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#34ABFF",
                                    },

                                    {
                                        offset: 1,
                                        color: "#006BFE",
                                    },
                                ]),
                            },
                        },
                        label: {
                            show: false,
                            position: "top",
                            fontSize: 12,
                            color: "#F5F5F5",
                            offset: [0, -5],
                            formatter: "{c}",
                        },
                    },
                    {
                        data: lastYear,
                        name: "去年",
                        type: "bar",
                        barWidth: "10px",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#89FCCC",
                                    },

                                    {
                                        offset: 1,
                                        color: "#00FF95",
                                    },
                                ]),
                            },
                        },
                        label: {
                            show: false,
                            position: "top",
                            fontSize: 12,
                            color: "#F5F5F5",
                            offset: [0, -5],
                            formatter: "{c}",
                        },
                    },
                ],
            };
            myChart.setOption(option);


        },
        dateFormat(date, format) {
            format = format || 'yyyy-MM-dd hh:mm:ss'
            if (date !== 'Invalid Date') {
                let o = {
                    'M+': date.getMonth() + 1, //month
                    'd+': date.getDate(), //day
                    'h+': date.getHours(), //hour
                    'm+': date.getMinutes(), //minute
                    's+': date.getSeconds(), //second
                    'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
                    S: date.getMilliseconds(), //millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(
                        RegExp.$1,
                        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
                    )
                for (let k in o)
                    if (new RegExp('(' + k + ')').test(format))
                        format = format.replace(
                            RegExp.$1,
                            RegExp.$1.length === 1
                                ? o[k]
                                : ('00' + o[k]).substr(('' + o[k]).length)
                        )
                return format
            }
            return ''
        },
        //获取实时日期
        //获取实时日期
        getTime() {
            const dataTime = new Date()
            this.nowDate = this.dateFormat(dataTime, 'yyyy年MM月dd')
            let w = ['日', '一', '二', '三', '四', '五', '六']
            let xinqi = dataTime.getDay()
            this.week = '星期' + w[xinqi] //星
        },
        back() {
            this.$router.replace({ path: '/home' });
        },
        go1() {
            this.$router.push({ path: '/cockpit-cockpitjd1' })
        },
        go2() {
            this.$router.push({ path: '/cockpit-cockpitjj1' })
        },
        go3() {
            this.$router.push({ path: '/cockpit-cockpityk1' })
        },
        go4() {
            this.$router.push({ path: '/cockpit-cockpitjt1' })
        },
    },
    watch: {},

}
</script>

<style lang="scss" scoped >
.tableDiv {
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;

    .td_item {
        width: calc(100% - 10px);
        height: 32px;
        margin: 10px 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 29px;
        box-sizing: border-box;
        background: rgba(2, 65, 110, 0.3);

        .tdi_left {
            display: flex;
            align-items: center;

            .tdil_top {
                width: 47px;
                height: 24px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                line-height: 24px;
                text-align: center;
                font-size: 12px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }

            .tdil_name {
                margin-left: 16px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }

        .tdi_right {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C6D7F1;
        }
    }
}

.arrow {
    height: 14px;
    width: 10px;
}

.mjzyx_pm {
    width: 100%;
    height: calc(100% - 194px);
    padding: 0 20px;
    overflow: hidden;

    .mpm_item {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mpmi_left {
            width: calc(100% - 80px);
            display: flex;
            align-items: center;

            .mpmil_top {
                width: 47px;
                height: 24px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }

            .mpmil_city {
                margin-left: 20px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
                text-align: right;
            }

            .mpmil_line {
                width: 1px;
                height: 42px;
                background: #0A2840;
                margin-left: 10px;
            }

            .mpmil_bl {
                width: calc(100% - 120px);
                height: 6px;
                background: #172640;
                border-radius: 0 3px 3px 0;
                position: relative;

                .mpmil_bl_bfb {
                    height: 100%;
                    background: linear-gradient(270deg, #00BFF4 0%, rgba(4, 110, 255, 0) 100%);
                    border-radius: 0 3px 3px 0;
                }
            }
        }

        .mpmi_right {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C6D7F1;
        }
    }
}

.ul-scoll {
    padding-left: 0;
}

.selected_item {
    color: #0096FF !important;
}

.select::-webkit-scrollbar {
    background-color: transparent;
}

.select::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.select::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f1f1;
}

.select {
    left: 35%;
    position: absolute;
    top: 39px;
    max-height: 337px;
    min-width: 210px;
    border: 1px solid #065691;
    background: #0A2840;
    overflow: auto;

    .triangle {
        position: relative;
        left: 35%;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        /* 左边透明 */
        border-right: 7px solid transparent;
        /* 右边透明 */
        border-bottom: 10px solid #065691;
    }

    .select_item {
        cursor: pointer;
        width: 100%;
        height: 34px;
        background: #0A2840;
        border-bottom: 1px solid #053c63;
        color: white;
        line-height: 34px;
        padding: 0 30px;
    }
}
.moduledivright{
    width: 100%;
    height: 64%;
    display: flex;
    flex-direction: column;
    .Accessislandstatistics{
        width: 100%;
        flex-grow: 1;
    }
}

.modulediv {
    width: 100%;
    height: 32%;
    display: flex;
    flex-direction: column;

    &.modulediv_rs {
        height: 100%;
    }

    &.modulediv_jzyx {
        height: 66%;
    }

    .numsdiv {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .numsdiv_pre {
            display: flex;
            flex-direction: column;
            align-items: center;

            &.numsdiv_pre_mszs {
                margin: 0 46px;
            }

            .np_title {
                font-size: 20px;
                font-family: PingFangHK, PingFangHK;
                font-weight: 500;
                color: #C6D7F1;
                line-height: 28px;
            }

            .np_num {
                display: flex;
                align-items: center;

                .npn_item {
                    width: 40px;
                    height: 56px;
                    line-height: 56px;
                    text-align: center;
                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                    background-size: 100% 100%;
                    margin: 5px 2px 0 2px;
                    font-size: 30px;
                    font-family: D-DINExp, D-DINExp;
                    font-weight: bold;
                    color: #C6D7F1;
                }

                .npn_dw {
                    height: 56px;
                    line-height: 56px;
                    padding: 0 5px;
                    font-size: 16px;
                    font-family: PingFangHK, PingFangHK;
                    font-weight: 500;
                    color: #C6D7F1;
                }
            }
        }
    }

    .md_map {
        margin-top: 11px;
        height: calc(100% - 100px);

        .mapdiv {
            height: 100%;
        }
    }

    .chartBox {
        width: 100%;
        height: calc(100% - 44px);
        position: relative;

        .cb_chart {
            width: 100%;
            height: 100%;
        }

        .cb_tab {
            position: absolute;
            width: 56px;
            height: 24px;
            border-radius: 1px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
            display: flex;
            align-items: center;
            right: 20px;
            top: 0;
            z-index: 99999;

            &>div {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, #15203C 0%, #142544 100%);
                font-size: 12px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #6D7D99;
                cursor: pointer;

                &.active {
                    color: #C6D7F1;
                    background: linear-gradient(180deg, #273F7C 0%, #4566BC 100%);
                }
            }
        }
    }

    .tableDiv {
        width: 100%;
        height: calc(100% - 44px);
        overflow: hidden;

        .td_item {
            width: calc(100% - 10px);
            height: 32px;
            margin: 10px 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 29px;
            box-sizing: border-box;
            background: rgba(2, 65, 110, 0.3);

            .tdi_left {
                display: flex;
                align-items: center;

                .tdil_top {
                    width: 47px;
                    height: 24px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    line-height: 24px;
                    text-align: center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }

                .tdil_name {
                    margin-left: 16px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                }
            }

            .tdi_right {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }

    .mjzyx_top {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mjzyxt_item {
            width: calc(50% - 9px);
            height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: end;
            align-items: flex-end;
            

            &:first-child {
                background: url(../../../assets/largescreen/ggtf_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            &:last-child {
                background: url(../../../assets/largescreen/lxtg_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            .mti_text {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #7299D4;
            }

            .mti_num {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                color: #C6D7F1;
                margin-top: 6px;

                span {
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #7299D4;
                    margin-left: 4px;
                }
            }

            &>div {
                margin-right: 12px;
            }
        }
    }

    .mpm_title {
        width: 100%;
        padding: 0 20px;
        font-size: 18px;
        font-family: YouSheBiaoTiHei;
        color: #C6D7F1;
        line-height: 16px;
        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        margin-bottom: 10px;
        z-index: 1;

        &::after {
            content: '';
            position: absolute;
            width: 64px;
            height: 10px;
            background: linear-gradient(90deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
            left: 20px;
            bottom: -4px;
            z-index: 0;
        }
    }

    .mjzyx_pm {
        width: 100%;
        height: calc(100% - 194px);
        padding: 0 20px;
        overflow: hidden;

        .mpm_item {
            width: 100%;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .mpmi_left {
                width: calc(100% - 80px);
                display: flex;
                align-items: center;

                .mpmil_top {
                    width: 47px;
                    height: 24px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }

                .mpmil_city {
                    margin-left: 20px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                    text-align: right;
                }

                .mpmil_line {
                    width: 1px;
                    height: 42px;
                    background: #0A2840;
                    margin-left: 10px;
                }

                .mpmil_bl {
                    width: calc(100% - 120px);
                    height: 6px;
                    background: #172640;
                    border-radius: 0 3px 3px 0;
                    position: relative;

                    .mpmil_bl_bfb {
                        height: 100%;
                        background: linear-gradient(270deg, #00BFF4 0%, rgba(4, 110, 255, 0) 100%);
                        border-radius: 0 3px 3px 0;
                    }
                }
            }

            .mpmi_right {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }

    .ul-scoll {
        padding-left: 0;
    }
}

/deep/.dv-scroll-board {
    .header {
        .header-item {
            text-align: center;
            cursor: pointer;
            padding: 0;
        }
    }

    .rows {
        .row-item {
            height: 47px !important;
        }

        .ceil {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }
}

.stateStyle {
    line-height: 24px;
    text-align: center;
    display: block;
    width: 57px;
    height: 24px;
    background: url(https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png) no-repeat center;
    color: #FFFFFF;
}

.mapdiv {
    height: 100%;
    position: relative;
    background: url('../../../assets/largescreen/y11.png') no-repeat;
    background-size: 100% 100%;

    .mapdiv_town {
        width: 68px;
        height: 41px;
        background: url('../../../assets/largescreen/town_bg.png');
        position: absolute;
        font-size: 16px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        padding-top: 5px;
        cursor: pointer;

        &.town_active {
            width: 84px;
            height: 78px;
            background: url('../../../assets/largescreen/town_active_bg.png');
            padding-top: 8px;
            margin-left: -8px;
            margin-top: -37px;
        }
    }
}

.Statisticalanalysis {
    width: 100%;
    height: 36%;
}

.downArrow {
    background: url('../../../assets/largescreen/downArrow.png') no-repeat;
    height: 14px;
    width: 10px;
}

.Passengerflow1 img {
    width: 24px;
    height: 24px;
}

.mybar {
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

.Passengerflow1 {
    width: 24px;
    height: 24px;
    margin-right: 15px;
}

.Passengerflow3 {
    height: 40px;
    font-size: 18px;
    font-family: DINAlternate, DINAlternate;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 40px;
    padding: 0 10px;
}

.Passengerflow2 {
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 40px;
}
.yupiaotongji{
    width: 100%;
    height: 32%;
    .modulediv111{
        width: 100%;
        height: 100%;
    }
}

.Passengerflow {
    flex-direction: column;
    width: 100%;
    background: linear-gradient(270deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
    border-radius: 2px;
    border: 1px solid #294178;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  flex-grow: 1;
    overflow: hidden;

    .flowTableHeader {
        display: flex;
        align-items: center;
        height: 42px;
        width: 100%;
        background: linear-gradient(180deg, #062156 0%, #0B3975 100%);
        color: #C6D7F1;
        font-weight: normal;
        font-size: 12px;
        position: absolute;
        top: 0;

        .yearsHeader {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }
    }

    .tableData {
        overflow: hidden;
        position: absolute;
        top: 42px;
        height: 100vh;

        .flowTableData {
            span {
                // width: 20%;
                line-height: 42px;
                align-items: center;
                text-align: center;
            }

            padding: 0 10px;
            width: 100%;
            margin: 5px 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 42px;
            width: 100%;
            background: linear-gradient(180deg, #062156 0%, #0B3975 100%);
            color: #C6D7F1;
            font-weight: normal;
            font-size: 12px;
        }
    }
}

.Passengerflowchurudao{
    flex-direction: column;
    width: 100%;
    background: linear-gradient(270deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
    border-radius: 2px;
    border: 1px solid #294178;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;

    .flowTableHeader {
        display: flex;
        align-items: center;
        height: 42px;
        width: 100%;
        background: linear-gradient(180deg, #062156 0%, #0B3975 100%);
        color: #C6D7F1;
        font-weight: normal;
        font-size: 12px;
        position: absolute;
        top: 0;

        .yearsHeader {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }
    }

    .tableData {
        overflow: hidden;
        position: absolute;
        top: 42px;
        height: 100vh;

        .flowTableData {
            span {
                // width: 20%;
                line-height: 42px;
                align-items: center;
                text-align: center;
            }

            padding: 0 10px;
            width: 100%;
            margin: 5px 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 42px;
            width: 100%;
            background: linear-gradient(180deg, #062156 0%, #0B3975 100%);
            color: #C6D7F1;
            font-weight: normal;
            font-size: 12px;
        }
    }
}
.Passengerflowright {
    width: 100%;
    height: 50px;
    background: linear-gradient(270deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
    border-radius: 2px;
    border: 1px solid #294178;
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    ::v-deep  .el-radio__label{
        color: #fff;
    }
    ::v-deep  .el-radio{
       margin: 5px 20px 8px 10px;

    }
}
.moduledivtop {
    width: 100%;
    height: 44px;
    background: url("../../../assets/largescreen/y6.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 22px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    line-height: 38px;
    padding-left: 35px;
}
.moduledivtopight{
    width: 100%;
    height: 44px;
    background: url("../../../assets/largescreen/y6.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .moduledivtopight1{
        font-size: 22px;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: 38px;
        padding-left: 35px;
    }
    ::v-deep  .el-radio__label{
        color: #fff;
    }
}


.modulediv {
    width: 100%;
    height: 32%;
    display: flex;
    flex-direction: column;

    &.modulediv_jzyx {
        height: 66%;
    }

    .numsdiv {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .numsdiv_pre {
            display: flex;
            flex-direction: column;
            align-items: center;

            &.numsdiv_pre_mszs {
                margin: 0 46px;
            }

            .np_title {
                font-size: 20px;
                font-family: PingFangHK, PingFangHK;
                font-weight: 500;
                color: #C6D7F1;
                line-height: 28px;
            }

            .np_num {
                display: flex;
                align-items: center;

                .npn_item {
                    width: 40px;
                    height: 56px;
                    line-height: 56px;
                    text-align: center;
                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                    background-size: 100% 100%;
                    margin: 5px 2px 0 2px;
                    font-size: 30px;
                    font-family: D-DINExp, D-DINExp;
                    font-weight: bold;
                    color: #C6D7F1;
                }

                .npn_dw {
                    height: 56px;
                    line-height: 56px;
                    padding: 0 5px;
                    font-size: 16px;
                    font-family: PingFangHK, PingFangHK;
                    font-weight: 500;
                    color: #C6D7F1;
                }
            }
        }
    }

    .md_map {
        margin-top: 11px;
        height: calc(100% - 100px);

        .mapdiv {
            height: 100%;
        }
    }

    .chartBox {
        width: 100%;
        height: calc(100% - 44px);
        position: relative;

        .cb_chart {
            width: 100%;
            height: 100%;
        }

        .cb_tab {
            position: absolute;
            width: 56px;
            height: 24px;
            border-radius: 1px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
            display: flex;
            align-items: center;
            right: 20px;
            top: 0;
            z-index: 99999;

            &>div {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, #15203C 0%, #142544 100%);
                font-size: 12px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #6D7D99;
                cursor: pointer;

                &.active {
                    color: #C6D7F1;
                    background: linear-gradient(180deg, #273F7C 0%, #4566BC 100%);
                }
            }
        }
    }

    .tableDiv {
        width: 100%;
        height: calc(100% - 44px);
        overflow: hidden;

        .td_item {
            width: calc(100% - 10px);
            height: 32px;
            margin: 10px 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 29px;
            box-sizing: border-box;
            background: rgba(2, 65, 110, 0.3);

            .tdi_left {
                display: flex;
                align-items: center;

                .tdil_top {
                    width: 47px;
                    height: 24px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    line-height: 24px;
                    text-align: center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }

                .tdil_name {
                    margin-left: 16px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                }
            }

            .tdi_right {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }

    .mjzyx_top {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mjzyxt_item {
            width: calc(50% - 9px);
            height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: end;
            align-items: flex-end;

            &:first-child {
                background: url(../../../assets/largescreen/ggtf_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            &:last-child {
                background: url(../../../assets/largescreen/lxtg_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            .mti_text {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #7299D4;
            }

            .mti_num {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                color: #C6D7F1;
                margin-top: 6px;

                span {
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #7299D4;
                    margin-left: 4px;
                }
            }

            &>div {
                margin-right: 12px;
            }
        }
    }

    .mpm_title {
        width: 100%;
        padding: 0 20px;
        font-size: 18px;
        font-family: YouSheBiaoTiHei;
        color: #C6D7F1;
        line-height: 16px;
        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        margin-bottom: 10px;
        z-index: 1;

        &::after {
            content: '';
            position: absolute;
            width: 64px;
            height: 10px;
            background: linear-gradient(90deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
            left: 20px;
            bottom: -4px;
            z-index: 0;
        }
    }

    .mjzyx_pm {
        width: 100%;
        height: calc(100% - 194px);
        padding: 0 20px;
        overflow: hidden;

        .mpm_item {
            width: 100%;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .mpmi_left {
                width: calc(100% - 80px);
                display: flex;
                align-items: center;

                .mpmil_top {
                    width: 47px;
                    height: 24px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }

                .mpmil_city {
                    margin-left: 20px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                    text-align: right;
                }

                .mpmil_line {
                    width: 1px;
                    height: 42px;
                    background: #0A2840;
                    margin-left: 10px;
                }

                .mpmil_bl {
                    width: calc(100% - 120px);
                    height: 6px;
                    background: #172640;
                    border-radius: 0 3px 3px 0;
                    position: relative;

                    .mpmil_bl_bfb {
                        height: 100%;
                        background: linear-gradient(270deg, #00BFF4 0%, rgba(4, 110, 255, 0) 100%);
                        border-radius: 0 3px 3px 0;
                    }
                }
            }

            .mpmi_right {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }

    .ul-scoll {
        padding-left: 0;
    }
}

.Intermediatemodule {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.divbg {
    background: linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%), linear-gradient(180deg, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%);
}

.chartBox {
    width: 100%;
    height: calc(100% - 44px);
    position: relative;

    .cb_chart {
        width: 100%;
        height: 100%;
    }

    .cb_tab {
        position: absolute;
        width: 56px;
        height: 24px;
        border-radius: 1px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
        display: flex;
        align-items: center;
        right: 20px;
        top: 0;
        z-index: 99999;

        &>div {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #15203C 0%, #142544 100%);
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #6D7D99;
            cursor: pointer;

            &.active {
                color: #C6D7F1;
                background: linear-gradient(180deg, #273F7C 0%, #4566BC 100%);
            }
        }
    }
}

.moduledivtopkll {
    top: 0px;
    left: 0px;
    z-index: 99999;
    width: 420px;
    height: 44px;
    background: url("../../../assets/largescreen/y6.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 18px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    line-height: 38px;
    padding-left: 35px;
    font-weight: bold;
}

.Leftsidemodule,
.Rightmodule {
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Touristbottomportrait {
    flex: 1;
    width: calc(100% - 60px);
    margin: 0 auto;
    height: calc(100vh - 136px);
    display: flex;
    justify-content: space-between;
}

.Bottomlandscaping {
    height: 47px;
    width: calc(100% - 60px);
    margin: 0 auto;
    background: url("../../../assets/largescreen/y10.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.selectdada {
    color: #FFFFFF !important;
}

.Navigationimgright {
    width: 183px;
    height: 50px;
    line-height: 50px;
    background: url("../../../assets/largescreen/y5.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    align-items: center;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    color: #79A5CB;
    text-align: center;
    cursor: pointer;
}

.Navigationimg {
    cursor: pointer;
    width: 183px;
    height: 50px;
    line-height: 50px;
    background: url("../../../assets/largescreen/y4.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    align-items: center;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    color: #79A5CB;
    text-align: center;
}

.Navigationright {
    width: calc(50% - 310px);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.Navigationleft {
    width: calc(50% - 310px);
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.Navigationmiddle {
    width: 360px;
    height: 89px;
    font-size: 40px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    line-height: 60px;
    background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-weight: bold;
}

.Navigation {
    flex-grow: 1;
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mydate {
    width: 220px;
    height: 22px;
    font-size: 16px;
    font-family: Helvetica;
    color: #C6D7F1;
    line-height: 22px;
    padding-right: 30px;
    text-align: right;
}

.weathertext {
    width: 110px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 22px;
}

.weatherimg img {
    width: 24px;
    height: 22px;
}

.weatherimg {
    width: 24px;
    height: 22px;
    margin-left: 10px;
    margin-right: 5px;
}

.mydate {
    width: 260px;
    height: 22px;
    font-size: 16px;
    font-family: Helvetica;
    color: #C6D7F1;
    line-height: 22px;
    padding-right: 30px;
    text-align: right;
}

.fanhuimain {
    width: 102px;
    height: 38px;
    margin-left: 30px;
}

.fanhuimain img {
    width: 102px;
    height: 38px;
}

.weather {
    width: 260px;
    height: 22px;
    display: flex;
    align-items: center;
}

.Touristportrait {
    width: 100%;
    height: 89px;
    background: url("../../../assets/largescreen/y2.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.maindivwc {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
}

.maindiv {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    /*zoom:1;*/
    background: url("../../../assets/largescreen/y1.png");
    /*background: #F1F4F5;*/
    width: 100%;
    height: 100%;
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;
}
</style>
